import React from "react";
import {
  EmptyPage,
  MyNavBar,
  MySickCircleCommentItem,
} from "../../../../components";
import { getMySickCircleCommentList } from "../../../../api/my";
import { useRequest } from "ahooks";
import { useAppSelector } from "../../../../store/hooks";
import { useNavigate } from "react-router-dom";
import style from "./style.module.scss";

// 定义 查询我的病友圈帖子的评论 数据类型
interface MySickCircleCommentItem {
  commentId: number;
  commentUserId: number;
  nickNmae: string;
  headPic: string;
  content: string;
  supportNum: number;
  opposeNum: number;
  opinion: number;
  whetherDoctor: number;
  commentTime: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  //  查询我的病友圈帖子的评论列表 接口
  const { data: mySickCircleCommentList = [] } = useRequest(async () => {
    const resp = await getMySickCircleCommentList(1, 1, 3, userId, sessionId);
    return [...JSON.parse(JSON.stringify(resp.result))];
  });
  return (
    <div>
      {mySickCircleCommentList.length === 0 ? (
        <EmptyPage
          path="/my/patient/circle"
          title="评论列表"
          desc="暂无评论啊!"
        ></EmptyPage>
      ) : (
        <div>
          <div className="navbar">
            <MyNavBar
              title="评论列表"
              leftArrow
              onClickLeft={() => navigate("/my/patient/circle")}
              style={{ backgroundColor: "#fff", marginBottom: "10px" }}
            ></MyNavBar>
          </div>
          <div className={style.mySickCircleCommentList}>
            {mySickCircleCommentList &&
              mySickCircleCommentList.map(
                (item: MySickCircleCommentItem, index: number) => {
                  return (
                    <MySickCircleCommentItem
                      item={item}
                      key={index}
                    ></MySickCircleCommentItem>
                  );
                }
              )}
          </div>
        </div>
      )}
    </div>
  );
};

export default Index;
